<template>
    <div class="wrapper">
     <div v-for="item in middleList" :key="item.id">
       <div class="top">
         <span class="price">￥{{item.price}}</span>
         <span class="yuanjia">￥{{item.yuanjia}}</span>
         <span class="pindan">{{item.pindan}}</span>
         <div class="desc">{{item.desc}}</div>
         <span class="tuihuo">假一赔十</span>
       </div>
       <div class="box">
         <span>全场包邮、七天退换</span>
         <span class="arrow">></span>
       </div>
       <div class="box">
         <span>6w人正在拼单快来抢吧！</span>
       </div>
       <div class="box user">
         <img class="user-img" src="https://avatar3.pddpic.com/a/Q0xqbW1qV3ozZ3k2aWpybXpYMVBSbDVYdk1LeWVaUEJmQT09djA0-1599825022?imageMogr2/thumbnail/100x" alt="">
         <div class="user-name">万年单身狗</div>
         <div class="user-button">去拼单</div>
         <div class="number">还差一人拼成</div>

       </div>
       <div class="box">
         <span>商品评价</span>
         <span class="arrow">查看全部></span>
       </div>
       <div class="pinglun">
         <div class="good green">好吃（8）</div>
         <div class="good">好看（12）</div>
         <div class="good">好用（9）</div>
       </div>
       <div class="pinglun-box">
         <img class="user-img" src="https://avatar3.pddpic.com/a/Q1A0dXdSdDk4SlVQYS96dUlXYUh3LzBZamFRaXV1M3gxQT09djA0-1659133230?imageMogr2/thumbnail/100x" alt="">
         <span>王老五</span>
         <div class="content">很好吃</div>
       </div>
       <div >
         <img v-for="items in item.goodsimg" :key="items.id" class="goods-img" :src="items.imgUrl" alt="">
       </div>
     </div>


    </div>
</template>

<script>
    export default {
        name: "GoodsMiddle",
        props: {
          middleList: Array
        }
    }
</script>

<style scoped lang="stylus">
  .wrapper
    padding 0.5rem
    margin-bottom 10rem
    .top
      height 0
      padding-bottom 23%
      overflow hidden
      position relative
      margin-top 0.5rem
      .price
        font-size 1.5rem
        color #e02e24
        float left
      .yuanjia
        float left
        font-size 0.7rem
        color #cccccc
        text-decoration line-through
        margin-top 0.2rem
      .pindan
        float right
        font-size 0.8rem
        clear both
      .desc
        margin-top 1.6rem
        font-weight bold
      .tuihuo
        position absolute
        right 6rem
        top 3rem
        background-color #25b513
        color white
        font-size 0.8rem
    .box
      height 0
      padding-bottom 8%
      overflow hidden
      font-size 1rem
      margin-top 0.3rem
      border-bottom 0.07rem solid #eeeeee
      .arrow
        float right
        font-size 0.7rem
        color #9c9c9c


    .user
      padding-bottom 10%
      font-size 0.8rem
      .user-img
        width 2rem
        height 2rem
        border-radius 50%
        float left
      .user-name
        float left
        margin-left 0.5rem
        margin-top 0.5rem
        font-size 0.9rem
      .user-button
        float right
        width 4rem
        height 4rem
        text-align center
        line-height 2rem
        background-color #e02e24
        color white
        border-radius 0.2rem
        font-size 1rem
      .number
        float right
        margin-top 0.2rem
        font-size 1rem
        margin-right 0.2rem
    .pinglun
      .good
        height 2rem
        width 5rem
        text-align center
        font-size 0.7rem
        font-weight bold
        margin 0.5rem 0 1.5rem
        float left
        background-color #fceae9
        line-height 2rem
        margin-left 0.5rem
        border-radius 0.4rem
      .green
        background-color #daf8cd
    .pinglun-box
      margin-top 4rem
      margin-bottom 20%
      .user-img
        width 2rem
        height 2rem
        border-radius 50%
        float left
        margin-left 0.2rem
        margin-right 0.2rem
      .content
        clear both
        color #58595b
        margin-top 1.5rem

    .goods-img
      width 100%
</style>
